<template>
    <div class="card_list">
        <div class="card_item" v-for="item in props.cardList" :key="item.id"
            :style="{ backgroundColor: item.card_color }">
            <!-- 顶部 照片 名字 -->
            <div class="card_top">
                <div class="card_top_img">
                    <img :src="item.card_avatar" alt="">
                </div>
                <div class="card_top_name">
                    <span class="card_top_name_name">{{ item.card_name }}</span>
                    <div class="totalcount">
                        <span class="totaltitle">总计：</span>
                        <span class="number">{{ item.current_amount }}元</span>
                    </div>
                </div>

            </div>
            <div class="total">
                <div class="totalcount">
                    <span class="totaltitle">支出：</span>
                    <span class="number">0元</span>
                </div>
                <div class="totalcount">
                    <span class="totaltitle">收入：</span>
                    <span class="number">0元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
    cardList: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="scss" scoped>
.card_list {
    .card_item {
        width: 100%;
        height: 3.8462rem;
        overflow: hidden;
        border-radius: .2051rem;
        margin-bottom: .2564rem;
        background-image: url("@/assets/Ornament.png");

        .card_top {
            display: flex;
            /* justify-content: center; */
            align-items: center;
            margin: .3846rem;

            .card_top_img {
                width: 1.2821rem;
                height: 1.2821rem;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .card_top_name {
                margin-left: .3846rem;

                .card_top_name_name {
                    color: #fff;
                    font-size: 0.4831rem;
                }

                .totalcount {
                    .totaltitle {
                        font-size: 0.2564rem;
                        color: #111111;
                    }

                    .number {
                        font-size: .3077rem;
                        font-family: DINPro-Medium, DINPro;
                        font-weight: 500;
                        color: #111111;
                    }
                }
            }

        }

        .total {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            grid-gap: 0.2564rem;
            justify-items: center;
            margin-top: 0.5128rem;

            .totalcount {
                .totaltitle {
                    font-size: 0.2564rem;
                    color: #111111;
                }

                .number {
                    font-size: .4615rem;
                    font-family: DINPro-Medium, DINPro;
                    font-weight: 500;
                    color: #111111;
                }
            }
        }
    }
}
</style>